<template>
  <nav id="navbar" class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm z-50 transition-all duration-300 shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-20">
        <!-- Logo -->
        <div class="flex items-center">
          <a href="#home" class="flex items-center">
            <i class="fa fa-paw text-primary text-2xl mr-3"></i>
            <span class="text-xl font-bold text-neutral">宠多多科技</span>
          </a>
        </div>
        
        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center space-x-8">
          <a href="#home" :class="[activeNavItem === 'home' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">首页</a>
          <a href="#about" :class="[activeNavItem === 'about' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">关于我们</a>
          <a href="#market-trends" :class="[activeNavItem === 'market-trends' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">行业趋势</a>
          <a href="#services" :class="[activeNavItem === 'services' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">服务项目</a>
          <a href="#advantages" :class="[activeNavItem === 'advantages' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">公司优势</a>
          <a href="#contact" :class="[activeNavItem === 'contact' ? 'text-primary' : 'text-gray-600', 'font-medium hover:text-primary transition-colors']">联系我们</a>
          
          <!-- CTA Button -->
          <a href="#contact" class="px-5 py-2 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 hover:shadow-lg transition-all hover:scale-105 duration-300">
            立即咨询
          </a>
        </div>
        
        <!-- Mobile Menu Button -->
        <div class="md:hidden">
          <button @click="toggleMenu" class="text-gray-600 hover:text-primary transition-colors" aria-label="Toggle menu">
            <i class="fa fa-bars text-2xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- Mobile Menu -->
    <div v-if="mobileMenuOpen" class="md:hidden bg-white border-t border-gray-200 shadow-lg">
      <div class="container mx-auto px-4 py-4">
        <div class="flex flex-col space-y-4">
          <a href="#home" @click="closeMenu" :class="[activeNavItem === 'home' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">首页</a>
          <a href="#about" @click="closeMenu" :class="[activeNavItem === 'about' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">关于我们</a>
          <a href="#market-trends" @click="closeMenu" :class="[activeNavItem === 'market-trends' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">行业趋势</a>
          <a href="#services" @click="closeMenu" :class="[activeNavItem === 'services' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">服务项目</a>
          <a href="#advantages" @click="closeMenu" :class="[activeNavItem === 'advantages' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">公司优势</a>
          <a href="#contact" @click="closeMenu" :class="[activeNavItem === 'contact' ? 'text-primary font-semibold' : 'text-gray-600', 'py-2 hover:text-primary transition-colors']">联系我们</a>
          
          <!-- Mobile CTA Button -->
          <a href="#contact" @click="closeMenu" class="block text-center px-5 py-3 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 transition-colors">
            立即咨询
          </a>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    activeNavItem: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      mobileMenuOpen: false
    }
  },
  mounted() {
    // 监听屏幕尺寸变化，在大屏幕时自动关闭移动菜单
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    toggleMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
      
      // 切换body滚动
      if (this.mobileMenuOpen) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = ''
      }
    },
    
    closeMenu() {
      this.mobileMenuOpen = false
      document.body.style.overflow = ''
    },
    
    handleResize() {
      if (window.innerWidth >= 768) {
        this.closeMenu()
      }
    }
  }
}
</script>